<template>
    <BaseEcharts :chatsOption="chatsOption"></BaseEcharts>
</template>

<script>
    import BaseEcharts from "../../../components/common/Cahrts/coreEcharts"

    import pieBaseConfig from "../../../echartsBaseConfig/pie"

    export default {
        components: {
            BaseEcharts
        },
        props: {
            chatsOption: {
                type: Object,
                default() {
                    return {
                        ...pieBaseConfig,
                        // legend: {
                        //     top: 'top',
                        //     show: true,
                        //     itemGap: 20,
                        //     textStyle: {
                        //         fontSize: 30,
                        //         color: "#fff",
                        //     }
                        // },
                        title: {
                            text: "住宅用地",
                            left: "center",
                            bottom: "2%",
                            textStyle: {
                                color: "#fff",
                                fontSize: 40,

                            },

                        },
                        series: [

                            {
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '40',
                                        fontWeight: 'bold'
                                    }
                                },
                                name: '面积模式',
                                type: 'pie',
                                radius: ["40%", "60%"],
                                center: ['50%', '50%'],
                                // roseType: 'area',
                                selectedMode: 'single',
                                label: {
                                    show: false,
                                    position: 'center',
                                    bleedMargin: 5,
                                    fontSize: 40,
                                    // alignTo: 'labelLine',
                                },

                                labelLine: {
                                    show: true,
                                    // length: 10,
                                    // length2: 10,
                                },
                                data: [
                                    {value: 40, name: 'rose1'},
                                    {value: 38, name: 'rose2'},
                                    {value: 32, name: 'rose3'},
                                    {value: 30, name: 'rose4'},
                                    {value: 28, name: 'rose5'},
                                    {value: 26, name: 'rose6'},
                                    {value: 22, name: 'rose7'},
                                    {value: 18, name: 'rose8'},
                                ]
                            }
                        ]
                    };
                }
            }
        }

    }
</script>
